<template>
  <!-- 弹窗 -->
  <div class="Dialog">
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      :before-close="handelClose"
      :close-on-click-modal="false"
      append-to-body
    >
      <div>
        <!-- 流程图 -->
        <template v-if="dialogType===&quot;0&quot;">
          <div
            v-loading="isImg"
            style="width: 100%;text-align: center;border: 1px solid #d4d4d4;min-height:100px"
          >
            <el-image
              style="width: calc(60vw); height: calc(70vh)"
              :src="imgSrc"
              fit="contain"
            />
          </div>
        </template>
        <!-- 流程日志 -->
        <template v-if="dialogType===&quot;1&quot;">
          <div style="height: calc(75vh);overflow-y:auto">
            <el-table
              max-height="550"
              :data="rzContent"
              :header-cell-style="{
                'background-color': 'rgb(64, 158, 255)',
                'color':'#fff',
                'border-bottom': '1px solid #fff',
                'text-align': 'center',
                'border-right': '1px solid #fff'
              }"
              :cell-style="{
                'text-align': 'center',
              }"
              border
              style="width: 100%"
            >
              <el-table-column prop="taskName" label="节点名称" width="150" />
              <el-table-column prop="approveTime" label="处理时间" width="180" />
              <el-table-column prop="approverName" width="150" label="执行人" />
              <el-table-column width="150" label="待执行人">
                <template slot-scope="scope">
                  <div v-if="scope.row.assignInfo">{{ scope.row.assignInfo }}</div>
                  <div v-else />
                </template>
              </el-table-column>
              <el-table-column width="150" label="状态">
                <template slot-scope="scope">
                  <div v-if="scope.row.status==&quot;start&quot;">开始</div>
                  <div v-if="scope.row.status==&quot;agree&quot;">通过</div>
                  <div v-if="scope.row.status==&quot;end&quot;">结束</div>
                  <div v-if="scope.row.status==&quot;awaiting_check&quot;">待审</div>
                  <div v-if="scope.row.status==&quot;reject&quot;">退回</div>
                </template>
              </el-table-column>
              <el-table-column prop="opinion" label="处理意见" />
            </el-table>
          </div>

        </template>
        <!-- 添加审批意见 -->
        <template v-if="dialogType===&quot;2&quot;">
          <el-input
            v-model="opinion"
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
          />
        </template>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handelClose">返 回</el-button>
        <el-button v-if="dialogType===&quot;2&quot;" type="primary" @click="makeSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commonnFunction from '../commonnFunction/index.js';

export default {
  data() {
    return {
      opinion: '',
      isImg: '',
      imgSrc: '',
      title: '我是弹窗',
      dialogVisible: false,
      width: '90%',
      // dialogType 根据这个类型去区分调用哪个组件，0 是图片 1 是表格
      dialogType: '0',
      rzContent: [],
      key: ''
    };
  },
  methods: {
    reset() {

    },
    async makeSure() {
      const loading = this.$loading({
        lock: true,
        text: '正在提交...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      await commonnFunction.editCommon(this.$parent, this.key);
      loading.close();
    },
    handelClose() {
      this.dialogVisible = false;
    }
  }

};

</script>

<style lang="scss" scoped>

</style>
